<template>
    <main>

        <!-- breadcrumb-area -->
        <div class="breadcrumb-area breadcrumb-bg-two">
            <div class="container custom-container">
                <div class="row">
                    <div class="col-12">
                        <div class="breadcrumb-content">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"> <router-link to="index.html">Home</router-link></li>
                                    <li class="breadcrumb-item"> <router-link to="shop.html">Shop</router-link></li>
                                    <li class="breadcrumb-item active" aria-current="page">Shop Details</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- breadcrumb-area-end -->

        <!-- shop-details-area -->
        <section class="shop-details-area pt-90 pb-90">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7">
                        <div class="shop-details-flex-wrap">
                            <div class="shop-details-nav-wrap">
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <router-link class="nav-link active" id="item-one-tab" data-toggle="tab"
                                            to="#item-one" role="tab" aria-controls="item-one" aria-selected="true"><img
                                                src="img/product/sd_nav_img01.jpg" alt=""></router-link>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <router-link class="nav-link" id="item-two-tab" data-toggle="tab" to="#item-two"
                                            role="tab" aria-controls="item-two" aria-selected="false"><img
                                                src="img/product/sd_nav_img02.jpg" alt=""></router-link>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <router-link class="nav-link" id="item-three-tab" data-toggle="tab"
                                            to="#item-three" role="tab" aria-controls="item-three"
                                            aria-selected="false"><img src="img/product/sd_nav_img03.jpg"
                                                alt=""></router-link>
                                    </li>
                                </ul>
                            </div>
                            <div class="shop-details-img-wrap">
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade show active" id="item-one" role="tabpanel"
                                        aria-labelledby="item-one-tab">
                                        <div class="shop-details-img">
                                            <img src="img/product/shop_details_img01.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="item-two" role="tabpanel"
                                        aria-labelledby="item-two-tab">
                                        <div class="shop-details-img">
                                            <img src="img/product/shop_details_img02.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="item-three" role="tabpanel"
                                        aria-labelledby="item-three-tab">
                                        <div class="shop-details-img">
                                            <img src="img/product/shop_details_img03.jpg" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="shop-details-content">
                            <h4 class="title">Dannon Max Natural Vitamin Ice Cream</h4>
                            <div class="shop-details-meta">
                                <ul>
                                    <li>Baands : <router-link to="shop.html">Ganic</router-link></li>
                                    <li class="shop-details-review">
                                        <div class="rating">
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                        </div>
                                        <span>Review</span>
                                    </li>
                                    <li>ID : <span>QZX8VGH</span></li>
                                </ul>
                            </div>
                            <div class="shop-details-price">
                                <h2 class="price">$9.99</h2>
                                <h5 class="stock-status">- IN Stock</h5>
                            </div>
                            <p>Organic food is food produced by methods complying with the standards of Rrganic farming.
                                Standards vary Lorem ipsum
                                dolor sit amet, consectetur adipiscing worldwide, but organic farming.</p>
                            <div class="shop-details-list">
                                <ul>
                                    <li>Type : <span>Ice Cream</span></li>
                                    <li>XPD : <span>Aug 19.2021</span></li>
                                    <li>CO : <span>Ganic</span></li>
                                </ul>
                            </div>
                            <div class="shop-perched-info">
                                <div class="sd-cart-wrap">
                                    <form action="#">
                                        <div class="cart-plus-minus">
                                            <input type="text" value="1">
                                        </div>
                                    </form>
                                </div>
                                <router-link to="javascript:;" class="btn">add to cart</router-link>
                            </div>
                            <div class="shop-details-bottom">
                                <h5 class="title"> <router-link to="javascript:;"><i class="far fa-heart"></i> Add To
                                        Wishlist</router-link></h5>
                                <ul>
                                    <li>
                                        <span>Tag : </span>
                                        <router-link to="javascript:;">ICE Cream</router-link>
                                    </li>
                                    <li>
                                        <span>CATEGORIES :</span>
                                        <router-link to="javascript:;">women's,</router-link>
                                        <router-link to="javascript:;">bikini,</router-link>
                                        <router-link to="javascript:;">tops for,</router-link>
                                        <router-link to="javascript:;">large bust</router-link>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="product-desc-wrap">
                            <ul class="nav nav-tabs" id="myTabTwo" role="tablist">
                                <li class="nav-item">
                                    <router-link class="nav-link active" id="details-tab" data-toggle="tab"
                                        to="#details" role="tab" aria-controls="details" aria-selected="true">Product
                                        Details</router-link>
                                </li>
                                <li class="nav-item">
                                    <router-link class="nav-link" id="val-tab" data-toggle="tab" to="#val" role="tab"
                                        aria-controls="val" aria-selected="false">Viewers Also Like</router-link>
                                </li>
                                <li class="nav-item">
                                    <router-link class="nav-link" id="review-tab" data-toggle="tab" to="#review"
                                        role="tab" aria-controls="review" aria-selected="false">Product
                                        Reviews</router-link>
                                </li>
                            </ul>
                            <div class="tab-content" id="myTabContentTwo">
                                <div class="tab-pane fade show active" id="details" role="tabpanel"
                                    aria-labelledby="details-tab">
                                    <div class="product-desc-content">
                                        <h4 class="title">Product Details</h4>
                                        <div class="row">
                                            <div class="col-xl-3 col-md-5">
                                                <div class="product-desc-img">
                                                    <img src="img/product/desc_img.jpg" alt="">
                                                </div>
                                            </div>
                                            <div class="col-xl-9 col-md-7">
                                                <h5 class="small-title">100% Natural Vitamin</h5>
                                                <p>Cramond Leopard & Pythong Print Anorak Jacket In Beige but also the
                                                    leap into electronic typesetting, remaining Lorem Ipsum is simply
                                                    dummy text of the printing and typesetting industry. Lorem Ipsum has
                                                    been the industry's standard dummy text ever since the 1500s, when
                                                    an unknown printer took a galley of type and scrambled it to make a
                                                    type specimen book.</p>
                                                <ul class="product-desc-list">
                                                    <li>65% poly, 35% rayon</li>
                                                    <li>Hand wash cold</li>
                                                    <li>Partially lined</li>
                                                    <li>Hidden front button closure with keyhole accents</li>
                                                    <li>Button cuff sleeves</li>
                                                    <li>Lightweight semi-sheer fabrication</li>
                                                    <li>Made in USA</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="val" role="tabpanel" aria-labelledby="val-tab">
                                    <div class="product-desc-content">
                                        <h4 class="title">Product Details</h4>
                                        <div class="row">
                                            <div class="col-xl-3 col-md-5">
                                                <div class="product-desc-img">
                                                    <img src="img/product/desc_img.jpg" alt="">
                                                </div>
                                            </div>
                                            <div class="col-xl-9 col-md-7">
                                                <h5 class="small-title">100% Natural Vitamin</h5>
                                                <p>Cramond Leopard & Pythong Print Anorak Jacket In Beige but also the
                                                    leap into electronic typesetting, remaining Lorem
                                                    Ipsum is simply dummy text of the printing and typesetting industry.
                                                    Lorem Ipsum has been the industry's standard dummy
                                                    text ever since the 1500s, when an unknown printer took a galley of
                                                    type and scrambled it to make a type specimen book.</p>
                                                <ul class="product-desc-list">
                                                    <li>65% poly, 35% rayon</li>
                                                    <li>Hand wash cold</li>
                                                    <li>Partially lined</li>
                                                    <li>Hidden front button closure with keyhole accents</li>
                                                    <li>Button cuff sleeves</li>
                                                    <li>Lightweight semi-sheer fabrication</li>
                                                    <li>Made in USA</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
                                    <div class="product-desc-content">
                                        <h4 class="title">Product Details</h4>
                                        <div class="row">
                                            <div class="col-xl-3 col-md-5">
                                                <div class="product-desc-img">
                                                    <img src="img/product/desc_img.jpg" alt="">
                                                </div>
                                            </div>
                                            <div class="col-xl-9 col-md-7">
                                                <h5 class="small-title">100% Natural Vitamin</h5>
                                                <p>Cramond Leopard & Pythong Print Anorak Jacket In Beige but also the
                                                    leap into electronic typesetting, remaining Lorem
                                                    Ipsum is simply dummy text of the printing and typesetting industry.
                                                    Lorem Ipsum has been the industry's standard dummy
                                                    text ever since the 1500s, when an unknown printer took a galley of
                                                    type and scrambled it to make a type specimen book.</p>
                                                <ul class="product-desc-list">
                                                    <li>65% poly, 35% rayon</li>
                                                    <li>Hand wash cold</li>
                                                    <li>Partially lined</li>
                                                    <li>Hidden front button closure with keyhole accents</li>
                                                    <li>Button cuff sleeves</li>
                                                    <li>Lightweight semi-sheer fabrication</li>
                                                    <li>Made in USA</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- shop-details-area-end -->

        <!-- coupon-area -->
        <div class="coupon-area">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="coupon-bg">
                            <div class="coupon-title">
                                <span>Use coupon Code</span>
                                <h3 class="title">Get $3 Discount Code</h3>
                            </div>
                            <div class="coupon-code-wrap">
                                <h5 class="code">ganic21abs</h5>
                                <img src="img/images/coupon_code.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- coupon-area-end -->

        <!-- best-sellers-area -->
        <section class="best-sellers-area pt-85 pb-70">
            <div class="container">
                <div class="row align-items-end mb-40">
                    <div class="col-md-8 col-sm-9">
                        <div class="section-title">
                            <span class="sub-title">Related Products</span>
                            <h2 class="title">From this Collection</h2>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-3">
                        <div class="section-btn text-left text-md-right">
                            <router-link to="shop.html" class="btn">View All</router-link>
                        </div>
                    </div>
                </div>
                <div class="best-sellers-products">
                    <div class="row justify-content-center">
                        <div class="col-3">
                            <div class="sp-product-item mb-20">
                                <div class="sp-product-thumb">
                                    <span class="batch">New</span>
                                    <router-link to="shop-details.html"><img src="img/product/sp_products09.png"
                                            alt=""></router-link>
                                </div>
                                <div class="sp-product-content">
                                    <div class="rating">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                    <h6 class="title"> <router-link to="shop-details.html">Uncle Orange Vanla Ready
                                            Pice</router-link></h6>
                                    <span class="product-status">IN Stock</span>
                                    <div class="sp-cart-wrap">
                                        <form action="#">
                                            <div class="cart-plus-minus">
                                                <input type="text" value="1">
                                            </div>
                                        </form>
                                    </div>
                                    <p>$1.50 - 1 kg</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="sp-product-item mb-20">
                                <div class="sp-product-thumb">
                                    <span class="batch discount">15%</span>
                                    <router-link to="shop-details.html"><img src="img/product/sp_products02.png"
                                            alt=""></router-link>
                                </div>
                                <div class="sp-product-content">
                                    <div class="rating">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                    <h6 class="title"> <router-link to="shop-details.html">Dannon Max Vanla ice
                                            cream</router-link></h6>
                                    <span class="product-status">IN Stock</span>
                                    <div class="sp-cart-wrap">
                                        <form action="#">
                                            <div class="cart-plus-minus">
                                                <input type="text" value="1">
                                            </div>
                                        </form>
                                    </div>
                                    <p>$3.50 - 1 lt</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="sp-product-item mb-20">
                                <div class="sp-product-thumb">
                                    <span class="batch discount">25%</span>
                                    <router-link to="shop-details.html"><img src="img/product/sp_products03.png"
                                            alt=""></router-link>
                                </div>
                                <div class="sp-product-content">
                                    <div class="rating">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                    <h6 class="title"> <router-link to="shop-details.html">Walnuts Max Vanla Greek
                                            Pice</router-link></h6>
                                    <span class="product-status">IN Stock</span>
                                    <div class="sp-cart-wrap">
                                        <form action="#">
                                            <div class="cart-plus-minus">
                                                <input type="text" value="1">
                                            </div>
                                        </form>
                                    </div>
                                    <p>$2.99 - 1 kg</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="sp-product-item mb-20">
                                <div class="sp-product-thumb">
                                    <span class="batch">new</span>
                                    <router-link to="shop-details.html"><img src="img/product/sp_products04.png"
                                            alt=""></router-link>
                                </div>
                                <div class="sp-product-content">
                                    <div class="rating">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                    <h6 class="title"> <router-link to="shop-details.html">Brachs Bens Vanla Ready
                                            Pice</router-link></h6>
                                    <span class="product-status">IN Stock</span>
                                    <div class="sp-cart-wrap">
                                        <form action="#">
                                            <div class="cart-plus-minus">
                                                <input type="text" value="1">
                                            </div>
                                        </form>
                                    </div>
                                    <p>$2.99 - 1 kg</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="sp-product-item mb-20">
                                <div class="sp-product-thumb">
                                    <span class="batch discount">25%</span>
                                    <router-link to="shop-details.html"><img src="img/product/sp_products05.png"
                                            alt=""></router-link>
                                </div>
                                <div class="sp-product-content">
                                    <div class="rating">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                    <h6 class="title"> <router-link to="shop-details.html">Black Lady Vanla Greek
                                            Grapes</router-link></h6>
                                    <span class="product-status">IN Stock</span>
                                    <div class="sp-cart-wrap">
                                        <form action="#">
                                            <div class="cart-plus-minus">
                                                <input type="text" value="1">
                                            </div>
                                        </form>
                                    </div>
                                    <p>$5.99 - 1 kg</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- best-sellers-area-end -->

    </main>
</template>

<script>
export default {
    props:[
        'id','type','name'
    ],
    components: {
            
    },
    data() {
        return {

        }
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },

    beforeCreate() {

    },
    beforeDestroy() {

    },
    deactivated() {

    },
}
</script>

<style>

</style>